<template>
    <div class="container">
        <div class="departNav">
            <h3 class="font16">医生</h3>
            <p class="font12" @click="hrefDepartList">全部医生</p>
        </div>
        <div class="content_scroll">
            <div class="scroll">
                <div class="one" v-for="(item, index1) in doctorLs" :key="index1" @click="toDoctor(item._id)">
                    <div class="item">
                        <img :src="item.img" alt="" style="width: 32px">
                        <div class="dotxt">
                            <span>{{ item.name }}</span>
                            <span class="jobBtn">{{ item.job }}</span>
                            <div>
                                <p>{{ item.child }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';


let doctorLs: any = ref([
    // { name: '高医师', depart: '门诊外科', job: '主治医师' },
    // { name: '柳医师', depart: '门诊外科', job: '主治医师' },
    // { name: '张医师', depart: '门诊外科', job: '主治医师' },
    // { name: '历医师', depart: '门诊外科', job: '主治医师' },
])
let router = useRouter()

const hrefDepartList = () => {
    router.push({
        name: 'DepartList'
    })
}

onMounted(() => {
    getDoctorList()
})

const getDoctorList = async () => {
    let { data: { data } } = await axios.get('http://127.0.0.1:3000/doctorLists')
    doctorLs.value = data
}

const toDoctor = (id: string) => {
    router.push({
        name: 'doctorHome',
        query: {
            id: id
        }
    })
}

</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
}

.departNav {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
}

.content_scroll {
    padding: 0 16px;

    .scroll {
        // width: 213px;


        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;

        .one {
            // width: 180px;
            // height: 60px;
            // border: 1px solid;
            display: inline-block;
            text-align: center;
            font-size: 12px;
            color: #333333;
            background-color: #f2f2f2;
            margin-left: 8px;
            border-radius: 5px;
            text-align: center;
            overflow: auto;

            .item {
                width: 180px;
                height: 60px;
                background-color: #f2f2f2;
                display: flex;
                gap: 16px;
                align-items: center;
                line-height: 20px;
                padding-left: 20px;
                box-sizing: border-box;
                border-radius: 5px;


                .dotxt {
                    text-align: left;

                    .jobBtn {
                        width: 60px;
                        height: 20px;
                        background-color: #bae0ff;
                        text-align: center;
                        line-height: 20px;
                        color: #fff;
                        padding: 3px;
                        margin-left: 10px
                    }
                }

            }

        }
    }
}
</style>